<template>

  <div class="my-person">
    <div class="top">
      <img :src="info.local_img" alt="" class="head-img">
      <p class="name">{{info.nickname}}</p>
      <p class="phone">{{info.phone}}</p>
      <div class="yue">
        <div class="cons">
          <p class="text">余额</p>
          <p class="price">{{info.money}} <span>元</span></p>
        </div>
        <div class="cons">
          <p class="text">赠送</p>
          <p class="price">{{info.give_money}} <span>元</span></p>
        </div>
        <p class="recharge" @click="router({path: './recharge'})">充值 <img src="@/assets/wode5.png" alt=""></p>
      </div>
    </div>
    <div class="section">
      <div class="item-con" @click="router({path: './order', query:{tab_index: 0}})">
        <img src="@/assets/wode2.png" class="item-con-img" alt="">
        <p>全部订单</p>
      </div>
      <div class="item-con" @click="router({path: './order', query:{tab_index: 1}})">
        <img src="@/assets/wode3.png" class="item-con-img" alt="">
        <p>待发货</p>
      </div>
      <div class="item-con" @click="router({path: './order', query:{tab_index: 2}})">
        <img src="@/assets/wode4.png" class="item-con-img" alt="">
        <p>已发货</p>
      </div>
    </div>
    <div class="section">
      <div class="item" @click="router({path: './invite', query:{price: info.allEarnings}})">
        <span>邀请收益</span>
        <span class="price time">￥{{info.allEarnings}}</span>
        <img class="arrow" src="@/assets/jiantou.png" alt="">
      </div>
      <div class="item" @click="router({path: './myInvite'})">
        <span>我的邀请</span>
        <img class="arrow" src="@/assets/jiantou.png" alt="">
      </div>
      <div class="item" @click="router({path: './myAppoint'})">
        <span>我的预约</span>
        <span class="time">{{info.pre_time | formatDate}}</span>
        <img class="arrow" src="@/assets/jiantou.png" alt="">
      </div>
      <div class="item" @click="router({path: './rechargeList'})">
        <span>充值记录</span>
        <img class="arrow" src="@/assets/jiantou.png" alt="">
      </div>
      <div class="item">
        <span>配镜记录</span>
        <img class="arrow" src="@/assets/jiantou.png" alt="">
      </div>
      <div class="item" @click="router({path: './myExam'})">
        <span>我的测试 </span>
        <img class="arrow" src="@/assets/jiantou.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { personCenter } from '@/api/api';
import { formatDate } from '@/util/date'
export default {
  filters: {
    formatDate(time) {
      if(!time){return;}
      let date = new Date(time*1000);
      return formatDate(date, 'yyyy年MM月dd日 hh:mm');
    }
  },
  data () {
    return {
      info: {},
    }
  },
  created () {
    this.person_center()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    person_center() {
      this.uid = sessionStorage.getItem('uid');
      personCenter(this.uid).then((res) => {
        this.info = res.data.info
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.my-person
  min-height 100vh
  padding-bottom 6rem
  background-color #f5f5f5
  box-sizing border-box
  .top
    background-image url(../../assets/wode1.png)
    background-size 100%
    height 20.2rem
    position relative
    margin-bottom 1rem
    .head-img
      position absolute
      width 6rem
      height 6rem
      border-radius 50%
      overflow hidden
      top 3rem
      left 1.5rem
    .name
      top 3.4rem
      position absolute
      font-size 1.8rem
      color #333
      font-weight 500
      left 8.5rem
    .phone
      position absolute
      left 8.5rem
      font-size 1.5rem
      color #999
      top 6.4rem
    .yue
      position absolute
      width 92%
      left 4%
      bottom 0
      height 8.2rem
      overflow hidden
      .cons
        color #fff
        float left
        padding-top 2rem
        padding-left 2rem
        position relative
        &:nth-child(2)
          margin-left 2.5rem
          padding-left 2.5rem
          &:after
            content ''
            position absolute
            width .1rem
            height 8.4rem
            transform scale(.5)
            border-left 1px solid #f6f6f6
            left 0
            top 0
        .text
          font-size 1.5rem
          height 1.4rem
          line-height 1.4rem
          margin-bottom 1rem
        .price
          line-height 1.8rem
          font-size 2.4rem
          height 1.8rem
          font-weight bold
          span
            font-size 1.5rem
            font-weight 400
      .recharge
        position absolute
        line-height 8.2rem
        height 8.2rem
        color #fff
        font-size 1.5rem
        font-weight 500
        right 0
        padding-right 3rem
        img
          width .6rem
          position absolute
          right 1.5rem
          top 3.6rem
  .section
    width 92%
    margin-left 4%
    border-radius .8rem
    background-color #fff
    padding 0 1.5rem
    box-sizing border-box
    margin-bottom 1rem
    overflow hidden
    .item-con
      width 33.3%
      float left
      text-align center
      padding-top 1.5rem
      padding-bottom 1.2rem
      img
        width 2.8rem
        height 2.8rem
        display inline-block
      p
        font-size 1.2rem
        color #999
        margin-top .3rem
        font-weight 500
    .item
      line-height 5rem
      border-bottom 1px solid #e6e6e6
      display block
      height 5rem
      position relative
      padding 0 .5rem
      font-size 1.5rem
      &:last-child
        border none
      .time
        position absolute
        right 2.1rem
        color #FE9700
        font-size 1.2rem
        font-weight bold
      .time.price
        font-size 1.5rem
      .arrow
        position absolute
        width .6rem
        right .5rem
        top 2rem
</style>